<template>
	<view>
		<!-- 规格 -->
		<u-popup :show="geshow" @close="geclose" :round="7">
			<view class="mainpadding" v-if="itemcurrent">
				<view class="flexbetween">
					<image style="width:109.5rpx;height:109.5rpx;" :src="itemcurrent.image_text" mode="">
					</image>
					<view class="" style="width: 81%;">
						<view class="bigtext xiaohui margin_top">{{itemcurrent.name}}</view>
						<view class="ershil xiaocheng fonweight">￥{{itemcurrentprice}}</view>
					</view>
				</view>
				<!-- 选择规格 -->
				<view class="">
					<template v-if="itemcurrent.spu.length">
						<view class="margin_top5" v-for="item in itemcurrent.spu" :key="item.id">
							<view class="ershil zhonghei fonweight">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view class="flexcenter margin_top margin_right2"
									:class="item.selecttext==ite?'ggyxz':'ggwxz'" v-for="ite in item.item" :key="ite"
									@click="checkgg(item,ite)">
									{{ite}}
								</view>
							</view>
						</view>
					</template>
					<view class="flexbetween margin_top5">
						<view class="ershil fonweight xiaohei">购买数量</view>
						<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
							v-model="buynumber"></u-number-box>
					</view>
				</view>
				<view class="bigbtny margin_top5" @click="addcar">确定</view>
			</view>
		</u-popup>
		<!-- 购物车 -->
		<u-popup :show="gwcshow" @close="gwcclose" :round="7">
			<view class="">
				<view class="mainpadding xiahuaxian">
					<view class="ershiba zhonghei textcenter">全部商品</view>
				</view>
				<view class="" style="max-height: 800rpx;overflow: auto;">
					<view class="flexbetween mainpadding xiahuaxian" v-for="item in carlist" :key="item.id">
						<image style="width:109.5rpx;height:109.5rpx;" :src="item.goods.image_text" mode="">
						</image>
						<view class="flexcolumnbet" style="width: 81%;height: 109.5rpx;">
							<view class="titletext zhonghei">{{item.goods.name}}</view>
							<view class="xiaohui  smalltext" v-if="item.suk">{{item.suk.difference}}</view>
							<view class="flexbetween " style="width: 100%;">
								<view class="titletext xiaocheng fonweight">￥{{item.number*item.suk.price}}</view>
								<view class="flexright">
									<view class="margin_right2" @click="changenum(item.number-1,item)">
										<u-icon name="minus-circle" color="#CDCDCD" size="28"></u-icon>
									</view>
									<view class="titletext zhonghei margin_right2">{{item.number}}</view>
									<view  @click="changenum(item.number+1,item)">
										<u-icon name="plus-circle-fill" color="#ff8505" size="28"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ffffff flexbetween margin_top" style="border-radius: 53rpx 53rpx 53rpx 53rpx;">
					<view class="flexleft" style="padding: 30rpx 40rpx;">
						<view class="dingwei">
							<image class="margin_right3" style="width: 37.5rpx;height: 39.58rpx;"
								src="../static/images/system/hj.png" mode="">
							</image>
							<view class="xsbtn">
								<u-badge max="99" bgColor="#ff8505" :value="carlist.length"></u-badge>
							</view>
						</view>
						<view class="hline margin_right2"></view>
						<view class="flexleft">
							<view class="sanshier zhonghei fonweight margin_right2">合计</view>
							<view class="sanshier xiaocheng fonweight">¥{{allPrice}}</view>
						</view>
					</view>
					<view class="jzbtn flexcenter" @click="tzqrdd">去结账</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 180rpx;">
			<u-swiper :list="dataAll.images_text" height="284" circular></u-swiper>
			<view class="" style="position: relative; top: -30rpx;">
				<!--  -->
				<view class="block  ffffff">
					<view class="sanshier zhonghei fonweight">{{dataAll.name}}</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft ">
							<view class="ershil xiaohei">{{dataAll.bq}}</view>
						</view>
						<view class="flexright" @click="tzcksj">
							<view class="xiaohui strongtext">查看详细介绍</view>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<view class="dingwei margin_right2">
								<view class="sishi fonweight zhonghei dingwei" style="z-index: 1;">{{dataAll.star}}
								</view>
								<view class="ztxhx"></view>
							</view>
							<view class="xiaohui strongtext ">{{dataAll.comment_num}}评论</view>
						</view>
						<view class="flexright" @click="tzckpj">
							<view class="xiaohui strongtext ">查看全部评论</view>
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="">
							<view class="flexleft">
								<view class="margin_right1">
									<u-icon name="phone" color="#969696"></u-icon>
								</view>
								<view class="xiaohei ershil">{{dataAll.mobile}}</view>
							</view>
							<view class="flexleft margin_top">
								<view class="margin_right1">
									<u-icon name="map" color="#969696"></u-icon>
								</view>
								<view class="xiaohei ershil">{{dataAll.detail}}</view>
							</view>
						</view>
						<view class="flexright">
							<view class="margin_right4" @click="callphone(dataAll.mobile)">
								<image class="dhicon" src="../static/images/system/dh.png" mode=""></image>
								<view class="xiaocheng ershil margin_top1 textcenter">电话</view>
							</view>
							<view class="" @click="openmap">
								<image class="dhicon" src="../static/images/system/dh1.png" mode=""></image>
								<view class="xiaolan ershil margin_top1 textcenter">导航</view>
							</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="mainpadding">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="item in cjwtTypeIndexArr"
							:key="item.id" @click="cjwt_type_id=item.id;init()">
							<view class=" margin_top2 margin_right2" :class="cjwt_type_id==item.id?'yixbtn':'wxzbtn'">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<view class="flexcolumn" v-if="list.data.length==0">
						<view class="placeholderimage" style="margin-top: 100rpx;"></view>
						<view class="xiaohui margin_top main_size">暂无数据</view>
					</view>
					<view class="flexbetween flex_wrap">
						<view class="dqwushi margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages_index/canpinxq?id=',item.id)">
							<image style="width: 100%;height: 338rpx;" :src="item.image_text" mode="">
							</image>
							<view class="ffffff" style="padding: 30rpx 14rpx;" @click.stop="showitem(item.id)">
								<view class="ershiba xiaohei">{{item.name}}</view>
								<view class="flexbetween margin_top2">
									<view class="titletext xiaocheng fonweight">￥{{item.price}}</view>
									<u-icon name="plus-circle-fill" color="#ff8505" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="ffffff flexbetween" style="border-radius: 53rpx 53rpx 53rpx 53rpx;">
				<view class="flexleft" style="padding: 30rpx 40rpx;" @click="gwcfn()">
					<view class="dingwei">
						<image class="margin_right3" style="width: 37.5rpx;height: 39.58rpx;"
							src="../static/images/system/hj.png" mode="">
						</image>
						<view class="xsbtn">
							<u-badge max="99" bgColor="#ff8505" :value="carlist.length"></u-badge>
						</view>
					</view>
					<view class="hline margin_right2"></view>
					<view class="flexleft">
						<view class="sanshier zhonghei fonweight margin_right2">合计</view>
						<view class="sanshier xiaocheng fonweight">¥{{allPrice}}</view>
					</view>
				</view>
				<view class="jzbtn flexcenter" @click="tzqrdd">去结账</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				pageShow: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				cjwtTypeIndexArr: [],
				cjwt_type_id: "",
				gwcshow: false, //购物车
				geshow: false, //规格
				itemcurrent: null,
				itemcurrentprice: "",
				sku_id: "",
				guigeflag: false,
				buynumber: 1,
				carlist: [],
				allPrice: "0",
				isLoad:false,
				
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.getcar()
			}
		},
		watch: {
			carlist: {
				handler(newValue, oldValue) {
					let allPrice = 0
					newValue.forEach(item => {
						allPrice = allPrice + Number(item.suk.price) * Number(item.number)
						console.log(allPrice);
					})
					this.allPrice = allPrice
				},
				deep: true
			},
			'itemcurrent.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.itemcurrent.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.itemcurrentprice = item.price //价格赋值
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			gwcfn(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.gwcshow = true
			},
			addcar() { //加入购物车
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/foodshopgoodscartcl/addCart', 'GET', {
					goods_id: this.itemcurrent.id,
					number: this.buynumber,
					sku_id: this.sku_id,
					shop_id: this.dataAll.shop_id,
					foodshop_id: this.listid
				}).then(res => {
					uni.hideLoading()
					this.geshow = false
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						if (httpRequest.checkIsLogin()) {
							this.getcar()
						}
					}
				})
			},
			getcar() { //获取购物车数据
				httpRequest.request('/api/foodshopgoodscartcl/cartList', 'GET', {
					shop_id: this.dataAll.shop_id,
					foodshop_id: this.listid
				}, false, false, true).then(res => {
					this.isLoad = true
					this.carlist = res.data
				})
			},
			changenum(e, item) {
				if(e==0){
					this.delitem(item)
					return false
				}
				item.number = e
				httpRequest.request('/api/foodshopgoodscartcl/clCart', 'GET', {
					cart_id: item.id,
					number: e,
				}, false, false, true).then(res => {
					if (res.code != 1) {
						httpRequest.toast(res.msg)
					}
				})
			},
			delitem(item) {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/foodshopgoodscartcl/delCart', 'POST', {
					data:[{
						goods_id: item.goods_id,
						sku_id:item.sku_id,
						shop_id: this.dataAll.shop_id,
						foodshop_id: this.listid
					}]
				}, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.getcar()
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			showitem(id) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/Foodshopcl/foodshopGoodsDetail', 'GET', {
					id
				}, false, false, true).then(res => {
					uni.hideLoading()
					res.data.spu.forEach(current => {
						current.item = current.item.split(",")
						this.$set(current, "selecttext", "")
					})
					this.itemcurrent = res.data
					this.itemcurrentprice = res.data.price
					this.geshow = true
				})
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			geclose() {
				this.geshow = false
			},
			gwcclose() {
				this.gwcshow = false
			},
			cjwtTypeIndex() {
				httpRequest.request('/api/Foodshopcl/foodshopGoodsCategoryIndex', 'GET', {
					shop_id: this.dataAll.shop_id
				}, false, false, true).then(res => {
					if (res.data.length) {
						this.cjwtTypeIndexArr = res.data
						this.cjwt_type_id = res.data[0].id
						this.init()
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					foodshop_goods_category_id: this.cjwt_type_id,
					foodshop_id: this.listid
				}
				let url = '/api/Foodshopcl/foodshopGoodsInex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getDetail() {
				httpRequest.request('/api/Foodshopcl/foodshopDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.cjwtTypeIndex()
					if (httpRequest.checkIsLogin()) {
						this.getcar()
					}
					this.pageShow = true
				})
			},
			openmap() {
				uni.openLocation({
					latitude: Number(this.dataAll.lat), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(this.dataAll.lng), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: this.dataAll.name, //即将传到高德或腾讯地图的店铺名称
					address: this.dataAll.detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 跳转商家介绍
			tzcksj() {
				uni.navigateTo({
					url: '/pages_index/shangjiajs?type=3&id=' + this.listid
				})
			},
			// 跳转查看评价
			tzckpj() {
				uni.navigateTo({
					url: '/pages_index/pingjiajiudian?type=3&id=' + this.listid
				})
			},
			// 跳转确认订单
			tzqrdd() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if(this.carlist.length==0){
					httpRequest.toast("请选择商品")
					return false
				}
				let data = {
					shop_id: this.dataAll.shop_id,
					foodshop_id: this.listid,
					lists: [],
					
				}
				this.carlist.forEach(item => {
					data.lists.push({
						goods_id: item.goods_id,
						sku_id:item.sku_id,
						number: item.number
					})
				})
				uni.navigateTo({
					url: '/pages_index/querenddcy?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.ggwxz {
		padding: 9rpx 30rpx;
		background: #F5F5F5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F5F5F5;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.ggyxz {
		padding: 9rpx 30rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF9341;
		font-weight: 500;
		font-size: 26rpx;
		color: #FF9341;
	}

	.xsbtn {
		position: absolute;
		top: -10rpx;
		right: 20rpx;
	}

	.jzbtn {
		width: 178rpx;
		height: 101rpx;
		background: #FF8505;
		border-radius: 0rpx 53rpx 53rpx 0rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.hline {
		height: 42rpx;
		width: 2rpx;
		background-color: #D8D8D8;
	}

	.dqwushi {
		width: 48%;
	}

	.wxzbtn {
		width: 118rpx;
		height: 53rpx;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yixbtn {
		width: 118rpx;
		height: 53rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF8505;
		font-weight: 500;
		font-size: 24rpx;
		color: #FF8505;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hhbtn {
		width: 89rpx;
		height: 37rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
		border: 2rpx solid #999999;
	}

	.shangj:first-child {
		margin-top: 0;
	}

	.shangj {
		margin-top: 30rpx;
	}

	.huabtn {
		width: 295rpx;
		height: 76rpx;
		border-radius: 120rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #FF9341;
	}

	.zaxd {
		width: 87rpx;
		height: 86rpx;
	}

	.tupian {
		width: 199rpx;
		height: 228rpx;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}

	.xhbtn {
		width: 72rpx;
		height: 34rpx;
		background: #E7E7E7;
		border-radius: 17rpx 17rpx 17rpx 17rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.dhicon {
		width: 66.66rpx;
		height: 66.66rpx;
	}

	.ztxhx {
		position: absolute;
		bottom: 6rpx;
		left: 0;
		width: 56rpx;
		z-index: 0;
		height: 9rpx;
		background: #FF9341;
	}

	.block {
		padding: 30rpx 30rpx;
		border-radius: 39rpx 39rpx 0rpx 0rpx;
	}
</style>